<template>
  <el-button
    class="ui-button"
    :class="[{'is-link': link, 'is-block': block}]"
    v-bind="innerProps"
    :loading="innerLoading"
    @click="handleClick"
  >
    <span class="ui-button__icon" v-if="!innerLoading && ($slots.icon || icon)">
      <slot name="icon">
        <ui-icon v-if="icon" :name="icon"></ui-icon>
      </slot>
    </span>
    <slot></slot>
  </el-button>
</template>
<script>
import ElButton from 'element-ui/lib/button'
import 'element-ui/lib/theme-chalk/button.css'
import { getClosestPopup } from './utils'
import UiIcon from '../icon'

export default {
  name: 'UiButton',
  inject: {
    UiToolbar: {
      default: null
    }
  },
  components: {
    UiIcon,
    ElButton
  },
  props: Object.assign({}, ElButton.props, {
    link: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String
    }, 
    click: {
      type: Function
    },
    block: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    }
  }),
  data() {
    return {
      innerLoading: this.loading
    }
  },
  computed: {
    innerProps () {
      const { icon, ...props } = this.$props
      return props
    }
  },
  watch: {
    loading() {
      this.innerLoading = this.loading
    }
  },
  methods: {
    closeDialog() {
      if (this.$parent.$options.name === 'UiToolbar') {
        const popup = getClosestPopup(this)
        if (popup && this.UiToolbar && this.UiToolbar.bindClose) {
          popup.close()
        }
      }
    },
    handleClick(evt) {
      if (this.innerLoading) {
        return
      }
      if (typeof this.click === 'function') {
        const rs = this.click()
        if (rs && rs.then) {
          this.innerLoading = true
          rs.then(() => {
            this.innerLoading = false
            this.closeDialog()
          }, (err) => {
            console.error(err)
            this.innerLoading = false
            return Promise.reject(err)
          })
        } else {
          if (rs !== false) {
            this.closeDialog()
          }
        }
      } else {
        this.closeDialog()
      }
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less">
.ui-button {
  &.is-block {
    width: 100%;
    box-sizing: border-box;
  }
  &:not(.is-link) {
    .ui-button__icon{
      margin-left: -5px;
      margin-right: 3px;
    }
  }
  &.el-button.el-button--small{
    font-size: 14px;
    font-weight: normal;
    padding-left: 16px;
    padding-right: 16px;
  }
  &.el-button{
    font-weight: normal;
    &:not(.is-link) {
      &.el-button--primary{
        background-color: #3385FF;
        &:hover {
          background-color: #4f93f7;
        }
      }
    }
    &.is-link{
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 0;
      padding-right: 0;
      border-color: transparent;
      background-color: transparent;
      &:hover {
        border-color: transparent;
        background-color: transparent;
      }
      &:not(.is-disabled) {
        &.el-button--primary{
          color: #3385FF;
        }
        &.el-button--danger{
          color: #F91B22;
        }
        &.el-button--success{
          color: #7ebf4a;
        }
        &.el-button--info{
          color: #919399;
        }
        &.el-button--warning{
          color: #dba54a;
        }
      }
      &.is-disabled{
        color: #999;
      }
    }
  }
  &.el-button--mini{
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
  }
  &.el-button--small{
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 18px;
  }
  &.el-button--large {
    padding-top: 12px;
    padding-bottom: 12px;
    height: 54px;
  }
}
.ui-button__icon{
  display: inline-block;
  vertical-align: top;
}
</style>
